<template>
  <!-- 商家页 -->
  <div class="box">
    <div class="top">
      <div class="top_t">
        <h2>{{obj.name}}</h2>
        <p>
          <img src="@/assets/xx.png" alt style="margin-left:0;" />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/xx.png" alt />
          <img src="@/assets/c.png" alt />
          <span class="price">(661)</span>
          <span>月售{{obj.sellCount}}单</span>
        </p>
      </div>
      <ul class="top_b">
        <li>
          <p>起送价</p>
          <p>
            <span>{{obj.minPrice}}</span>
            <span>元</span>
          </p>
        </li>
        <li>
          <p>商家配送</p>
          <p>
            <span>{{obj.deliveryPrice}}</span>
            <span>元</span>
          </p>
        </li>
        <li>
          <p>平均配送时间</p>
          <p>
            <span>{{obj.deliveryTime}}</span>
            <span>分钟</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 公告与活动 -->
    <div class="p_big">
      <div class="products">
        <h2>公告与活动</h2>
        <p>{{obj.bulletin}}</p>
      </div>
      <!-- 满减 -->
      <ul class="activity" v-if="obj.supports">
        <li>
          <img src="@/assets/jian.png" alt />
          <span>{{obj.supports[0].description}}</span>
        </li>
        <li>
          <img src="@/assets/zhe.png" alt />
          <span>{{obj.supports[1].description}}</span>
        </li>
        <li>
          <img src="@/assets/te.png" alt />
          <span>{{obj.supports[2].description}}</span>
        </li>
        <li>
          <img src="@/assets/te.png" alt />
          <span>{{obj.supports[3].description}}</span>
        </li>
        <li style="border-bottom:0">
          <img src="@/assets/piao.png" alt />
          <span>{{obj.supports[4].description}}</span>
        </li>
      </ul>
    </div>
    <!-- 商家实景 -->
    <div class="Merchants">
      <h2>商家实景</h2>
      <ul>
        <li>
          <img src="@/assets/img1.jpg" alt />
        </li>
        <li>
          <img src="@/assets/img2.jpg" alt />
        </li>
        <li>
          <img src="@/assets/img3.jpg" alt />
        </li>
        <li style>
          <img src="@/assets/img1.jpg" alt />
        </li>
      </ul>
    </div>
    <!-- 商家信息 -->
    <div class="info">
      <ul class="activity" v-if="obj.supports">
        <li>
          <span>{{obj.infos[0]}}</span>
        </li>
        <li>
          <span>{{obj.infos[1]}}</span>
        </li>
        <li>
          <span>地址:{{obj.infos[2]}}</span>
        </li>
        <li>
          <span>{{obj.infos[3]}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  async mounted() {
    let { data: res } = await this.$http.get("/mock/data.json");
    console.log(res);
    this.obj = res.seller;
  }
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  background: #f3f5f7;
  overflow: auto;
  padding-bottom: 4.5rem;
  box-sizing: border-box;
  .top {
    background: #ffffff;
    height: 2.99rem;
    border-bottom: solid 2px #e6e7e8;
    border-top: solid 2px #e6e7e8;
    .top_t {
      height: 1.5rem;
      border-bottom: solid 1px #e6e7e8;
      margin: 0 0.36rem;
      display: flex;
      flex-direction: column;
      img {
        width: 0.3rem;
        height: 0.29rem;
        margin: 0 0.11rem;
      }
      h2 {
        font-size: 0.28rem;
        color: #07111b;
        margin: 0.36rem 0 0.16rem 0;
      }
      p {
        display: flex;
        .price {
          font-size: 0.15rem;
          color: #084a8b;
          margin: 0 0.24rem 0 0.06rem;
        }
      }
    }
    .top_b {
      display: flex;
      height: 1.48rem;
      li {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 2.48rem;
        height: 100%;
        border-right: solid 1px #e6e7e8;
        p:nth-child(1) {
          font-size: 0.2rem;
          color: #93999f;
        }
        p:nth-child(2) {
          span:nth-child(1) {
            font-size: 0.48rem;
            color: #07111b;
          }
        }
      }
    }
  }
  .p_big,
  .info {
   
    background: #ffffff;
    border-bottom: solid 1px #e6e7e8;
    .products {
      border-bottom: solid 1px #e6e7e8;
      margin-top: 0.32rem;
      height: 3.5rem;
      border-top: solid 2px #e6e7e8;
      padding: 0 0.3rem;
      box-sizing: border-box;
      h2 {
        font-size: 0.28rem;
        padding: 0.36rem 0 0.16rem 0.08rem;
      }
      p {
        color: red;
        font-size: 0.24rem;
        font-weight: 200;
        line-height: 0.48rem;
        padding: 0 0.24rem;
        box-sizing: border-box;
      }
    }
    .activity {
      background: #ffffff;
      padding: 0 0.3rem;
      img {
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 0.04rem;
        margin: 0 0.12rem 0 0.3rem;
      }
      li {
        display: flex;
        align-items: center;
        height: 0.96rem;
        border-bottom: solid 2px #e6e7e8;
      }
    }
  }
  .Merchants {
    height: 3rem;
    background: #ffffff;
    overflow: hidden;
    margin: 0.32rem 0;
    border-bottom: solid 2px #e6e7e8;
    border-top: solid 2px #e6e7e8;
    h2 {
      margin: 0.36rem 0 0.24rem 0.36rem;
      font-size: 0.28rem;
    }
    ul {
      display: flex;
      overflow-x: auto;
      li {
        display: flex;
        img {
          width: 2.4rem;
          height: 1.8rem;
          margin: 0 0.12rem 0 0.36rem;
        }
      }
    }
  }
}
</style>